<template>
    <div class="timeline">
        <div class="tableWidth">
            <TimeNodeTable ref="nodesRef" :height="height" :opt="['modify', addToPool]">
                <template #left>
                    <div style="display: flex;" v-if="isShow">
                        <el-date-picker v-model="date" type="date" placeholder="选择一个日期" value-format="YYYYMMDD" />
                        <el-button @click="addDate(-1)">上一天</el-button>
                        <el-button @click="addDate(1)">下一天</el-button>
                        <!-- <el-input v-model="query" style="width: 100px;"></el-input>
                        <el-button @click="loadData">查询</el-button> -->
                    </div>
                </template>
            </TimeNodeTable>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { YfLinkBtn } from '@/components';
import TimeNodeTable from './timenodeTable.vue'
import { Http, HttpSource, u_calculateDate } from '@/utils';
import { ElMessage } from 'element-plus';
import { useUserStore } from '@/store';
import { computed } from 'vue';

defineProps<{ height: number }>();

const userStore = useUserStore();
const isShow = computed(() => !!userStore.token);

const nodesRef = ref();

const addToPool: YfLinkBtn = {
    name: '加入待办关联池',
    width: 140,
    onClick: async (params: any, some: any) => {
        console.log(11111, params, some)
        const url = 'insertTimeTodoNode', request = { timeTodoId: 0, timeNodeId: params.row.timeNodeId };
        const res = await Http.post(HttpSource.Java, url, request);
        if (res) {
            ElMessage.success('已添加入待办关联池')
        }
    }
}

const
    date = ref(''),
    query = ref('');

const addDate = (value: number) => {
    date.value = u_calculateDate(date.value, value);
    loadData();
}

const loadData = () => {
    const request = {
        occurDate: date.value,
        query: query.value
    }
    nodesRef.value.loadData(request);
};

onMounted(() => {
    date.value = u_calculateDate();
    loadData()
})

</script>

<style lang="scss" scoped>
.timeline {
    height: 100%;
    display: flex;
    justify-content: center;
    padding: 20px;
}

.tableWidth {
    width: 70%;
}

@media screen and (max-width: 1680px) {
    .tableWidth {
        width: 80%;
    }
}

@media screen and (max-width: 1200px) {
    .tableWidth {
        width: 100%;
    }
}
</style>
